<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>菜单权限</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-row>
        <el-col :span="8">
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText">
          </el-input>
        </el-col>
        <el-col :span="6" :push="1">
          <el-button type="primary" class="el-icon-plus" @click="addParent">父级</el-button>
        </el-col>

      </el-row>

      <el-tree :data="menuTree"
               :indent=30
               highlight-current
               :props="props"
               :filter-node-method="filterNode"
               show-checkbox
               :expand-on-click-node="false"
               ref="tree"
      >

        <span class="custom-tree-node" slot-scope="{ node, data }">
<!--          <span>{{data}}</span>-->
       <span>
           <i :class="data.icon"></i>
        <span style="padding-left: 4px;">{{ node.label }}</span>
        <span style="padding-left: 4px;">
          <el-tag type="success" size="mini">{{ data.type == 0 ? "菜单" : "按钮" }}</el-tag>
        </span>
       </span>



          <span>
             <el-button
                 class="el-icon-edit"
                 type="text"
                 size="mini"
                 @click="edit(data)">
            编辑
          </el-button>
          <el-button
              :disabled="data.type==1"
              class="el-icon-plus"
              type="text"
              size="mini"
              @click="append(data)">
            添加
          </el-button>
          <el-button
              class="el-icon-delete"
              type="text"
              size="mini"
              @click="remove(node, data)">
            删除
          </el-button>
        </span>
       </span>


      </el-tree>
    </el-card>


    <el-dialog :visible.sync="dialogVisible" @close="close" :title="dialogTitle">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="节点名称" prop="menuName">
          <el-input v-model="formData.menuName" placeholder="请输入节点名称" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="URL" prop="url">
          <el-input v-model="formData.url" placeholder="请输入URL" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="权限编码" prop="perms">
          <el-input v-model="formData.perms" placeholder="请输入权限编码" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="formData.icon" placeholder="请输入图标" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="是否可用" prop="available">
          <el-radio-group v-model="formData.available" size="medium">
            <el-radio v-for="(item, index) in availableOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否展开" prop="open">
          <el-radio-group v-model="formData.open" size="medium">
            <el-radio v-for="(item, index) in openOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="orderNum">
          <el-input-number v-model="formData.orderNum" placeholder="排序" :step='1'></el-input-number>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="formData.type" size="medium">
            <el-radio v-for="(item, index) in typeOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addMenu, deleteMenuById, editMenu, getMenuTree} from "@/network/system/menu";

export default {
  name: "Menus",
  data() {
    return {
      filterText: '',
      props: {
        label: 'menuName',
        children: 'children'
      },
      menuTree: [],
      dialogVisible: false, //控制弹窗
      dialogTitle: '',
      formData: {
        id: undefined,
        parentId: undefined,
        menuName: '',
        url: '',
        perms: '',
        icon: '',
        available: undefined,
        open: undefined,
        orderNum: undefined,
        type: undefined,
      },
      rules: {
        menuName: [{
          required: true,
          message: '请输入节点名称',
          trigger: 'blur'
        }],
        url: [],
        perms: [],
        icon: [],
        available: [{
          required: true,
          message: '是否可用不能为空',
          trigger: 'change'
        }],
        open: [{
          required: true,
          message: '是否展开不能为空',
          trigger: 'change'
        }],
        orderNum: [{
          required: true,
          message: '排序',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '类型不能为空',
          trigger: 'change'
        }],
      },
      availableOptions: [{
        "label": "可用",
        "value": 1
      }, {
        "label": "禁用",
        "value": 0
      }],
      openOptions: [{
        "label": "展开",
        "value": 1
      }, {
        "label": "关闭",
        "value": 0
      }],
      typeOptions: [{
        "label": "菜单",
        "value": "0"
      }, {
        "label": "按钮",
        "value": "1"
      }]

    }
  }, created() {
    this.getMenuTree()
  }, methods: {
    addParent() {
      this.dialogTitle = "添加父节点"
      this.dialogVisible = true
      this.formData.parentId = 0
      console.log(this.formData)
    },
    edit(data) {
      this.dialogTitle = "编辑:【" + data.menuName + "】"
      this.dialogVisible = true
      this.formData = data

      console.log(this.formData)
    },
    append(data) {
      this.dialogTitle = "添加子节点"
      this.dialogVisible = true
      this.formData.parentId = data.id
    },
    remove(node, data) {
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        //执行删除方法
        deleteMenuById(data.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });

          this.getMenuTree()
        }, (err) => {

          this.$message({
            type: 'info',
            message: err.message

          });
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    /*获取权限树*/
    getMenuTree() {
      getMenuTree().then((res) => {
        this.menuTree = res.data.list
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.menuName.indexOf(value) !== -1;
    }
    ,
    close() {
      this.dialogTitle = ''
      this.dialogVisible = false
      this.formData = {
        menuName: '',
        url: '',
        perms: '',
        icon: '',
        available: undefined,
        open: undefined,
        orderNum: undefined,
        type: undefined
      }
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        /*编辑菜单*/
        if (this.formData.id != undefined) {

          editMenu(this.formData).then((res) => {
            console.log("编辑")

            if (res.success){
              this.$message({
                type: 'success',
                message: '编辑成功!'
              });
            }else {
              this.$message.error("编辑失败:  "+res.message);
            }
          })
        } else {
          console.log("添加")
          addMenu(this.formData).then((res) => {
              if (res.success){
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
              }else {
                this.$message.error("添加失败:  "+res.message);
              }
          })

        }


        this.close()
      })
      this.getMenuTree()


    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  }
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>